<script lang="ts" setup>
import type { NodeData } from '@/plugin/antvX6/node/type';

import { ElDialog, ElTabPane, ElTabs, TabPaneName } from 'element-plus';

import { thenWrapper, whenWrapper } from '@/plugin/antvX6/node/common';
import { ExecuteType } from '@/plugin/antvX6/node/type';
import { useAntvX6Store } from '@/store/operation';

import JsonViewer from '@/components/json-viewer/index.vue';
import { computed, onMounted, ref } from 'vue';
import { useClipboard } from '@vueuse/core';
import { getJsonToEl } from '@/api/operation';
import { X6EdgeJson, X6GraphJson, X6NodeJson } from '@/plugin/antvX6/condition/type';

const show = ref(false);
const antvX6Store = useAntvX6Store();

const openDialog = () => {
  show.value = true;
  exportEl();
  tabChange
};

const closeDialog = () => {
  show.value = false;
  elJson.value = '';
};

const elJson = ref();

const elEl = ref();
const { copied: elElCopy, copy: elElCopyFn } = useClipboard({ legacy: true, source: elEl.value });


const exportEl = () => {
  const rootNodes = antvX6Store
    .getGraph()
    .getNodes()
    .filter((item) => {
      return item.getData()?.isRootNode(antvX6Store.getGraph(), item);
    });

  if (!rootNodes || rootNodes.length === 0) {
    return;
  }

  if (rootNodes.length === 1 && rootNodes[0]) {
    const data = rootNodes[0].getData() as NodeData;

    const nextEl = data.buildNodeToJson(antvX6Store.getGraph(), rootNodes[0]);

    if (nextEl && nextEl.executeType === ExecuteType.NODE) {
      elJson.value = thenWrapper(antvX6Store.getGraph(), rootNodes[0]);
      return;
    }
    elJson.value = nextEl;
    return;
  }

  elJson.value = whenWrapper(antvX6Store.getGraph(), rootNodes);
};

const tabChange = async (tabName: TabPaneName) => {
  if (tabName === 'liteflowEl') {
    const { data } = await getJsonToEl(elJson.value)
    elEl.value = data;
  }
};

const antvX6Json = computed(() => {
  const antvJson = antvX6Store.getGraph().toJSON();
  const nodes: X6NodeJson[] = []
  const edges: X6EdgeJson[] = []
  antvJson.cells.forEach((item) => {
    if (item.shape == 'edge') {
      edges.push({
        id: item.id!!,
        shape: item.shape,
        source: item.source,
        target: item.target
      })
    } else {
      nodes.push({
        id: item.id!!,
        shape: item.shape!!,
        cmpData: item.data?.liteInfo.cmpData,
      })
    }
  })
  const rs: X6GraphJson = {
    nodes: nodes,
    edges: edges,
  }

  return rs
})

const activeName = ref('liteFlowJson');

defineExpose({
  openDialog,
  closeDialog,
});


</script>

<template>
  <div>
    <ElDialog v-model="show" title="输出EL" class="dialog-container" :draggable="true">
      <ElTabs v-model="activeName" type="border-card" class="el-tabs" :stretch="true" @tab-change="tabChange">
        <ElTabPane label="liteFlowJson" name="liteFlowJson" class="el-tab-pane">
          <JsonViewer :value="elJson" copyable :expanded="true" :boxed="false" :expand-depth="999"
            :show-array-index="false" />
        </ElTabPane>
        <ElTabPane label="liteflowEl" name="liteflowEl" class="el-tab-pane">
          <div class="el">
            <div class="copy-button">
              <div class="copy" v-show="!elElCopy" @click="elElCopyFn(elEl)">复制</div>
              <div class="copied" v-show="elElCopy">已复制</div>
            </div>
            {{ elEl }}
          </div>
        </ElTabPane>
        <ElTabPane label="antvX6Json" name="antvX6Json" class="el-tab-pane">
          <JsonViewer :value="antvX6Json" copyable :expanded="true" :boxed="false" :expand-depth="999"
            :show-array-index="false" />
        </ElTabPane>
      </ElTabs>
    </ElDialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.dialog-container) {
  height: 50%;
  overflow: hidden;

  .el-dialog__body {
    height: 90%;
  }
}

:deep(.el-tabs) {
  height: 100%;

  .el-tab-pane {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
}

.el {
  width: 100%;
  height: 100%;
  overflow: scroll;
  position: relative
}

.copy-button {
  position: absolute;
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  z-index: 5;
  right: 15px;
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  color: hsl(var(--foreground));
  white-space: nowrap;
  color: hsl(var(--primary));

  .copied {
    opacity: 0.4;
  }
}
</style>
